import React from 'react';
import {Link, useLocation, useNavigate} from "react-router-dom";
import {App, Button, Card, DatePicker, Form, Input, InputNumber, Switch} from "antd";
import {ReimburseType} from "type/ReimburseType";
import locale from "antd/es/date-picker/locale/zh_CN";
import TextArea from "antd/es/input/TextArea";
import LogFactory from "log/LogFactory";
import dayjs from "dayjs";
import {useAppDispatch} from "../../../redux/hook";
import {fetchUpdateReimburse} from "../../../redux/reducer/async/reimburseAsyncAction";

const log = LogFactory.getLog("ReimburseUpdateComponent") ;
const ReimburseUpdateComponent = () => {

    const reimburse: ReimburseType = useLocation().state ;
    const [loading, setLoading] = React.useState<boolean>(false) ;
    const { message } = App.useApp() ;
    const dispatch = useAppDispatch() ;
    const navigate = useNavigate() ;

    const initialValues: ReimburseType = {
      ...reimburse,
        createDate: dayjs(reimburse.createDate) ,
    } ;
    const onFinish = async (values: ReimburseType) => {
        setLoading(true) ;
        values.id = reimburse.id ;
        values.createDate = values.createDate.format("YYYY-MM-DD");
        if (!reimburse.status && values.status) {
            values.settleTime = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss") ;
        }
        let res = await dispatch(fetchUpdateReimburse(values)).unwrap() ;
        // log.debug("修改报销单结果: " , res) ;
        if(res.data > 0){
            // log.debug("修改数据成功") ;
            message.success("修改数据成功") ;
            navigate("..",{replace: true}) ;
        }else {
            log.debug("修改数据失败") ;
            message.error("修改数据失败") ;
        }
        setLoading(false) ;
    } ;

    return (
        <Card
            title="修改报销单"
            extra={ <Link to="..">报销单列表</Link> }
        >
            <Form<ReimburseType>
                layout={"horizontal"}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 12 }}
                initialValues={initialValues}
                onFinish={ onFinish }
            >
                <Form.Item<ReimburseType> label="报销总金额" name={"totalAmount"}>
                    <InputNumber min={0.00} precision={2} addonBefore={"¥"}/>
                </Form.Item>
                <Form.Item<ReimburseType> label="报销总条目" name={"itemCount"}>
                    <InputNumber min={0} addonAfter={"条"}/>
                </Form.Item>
                <Form.Item<ReimburseType> label="报销单说明" name={"explain"}>
                    <Input />
                </Form.Item>
                <Form.Item<ReimburseType> label="创建日期" name={"createDate"}>
                    <DatePicker locale={locale} format={"YYYY-MM-DD"}/>
                </Form.Item>
                <Form.Item<ReimburseType> label="结算状态" name={"status"}>
                    <Switch/>
                </Form.Item>
                <Form.Item<ReimburseType> label="数据排序" name={"order"}>
                    <InputNumber min={0} addonAfter={"ORDER"}/>
                </Form.Item>
                <Form.Item<ReimburseType> label="备注信息" name={"remark"}>
                    <TextArea rows={3} />
                </Form.Item>
                <Form.Item wrapperCol={{offset: 8,span: 16}}>
                    <Button loading={loading} type="primary" htmlType="submit">修改</Button>
                </Form.Item>
            </Form>
        </Card>
    );
};

export default ReimburseUpdateComponent;